<template>
  <div class="s-search" :class="{ 'is-fixed': fixed }" :style="{ height: c_height }">
    <div class="s-search-wrap" :style="c_style">
      <slot name="left"></slot>
      <div class="s-search-container" :style="{ background: $sTheme(this.inputBackground) }">
        <div v-if="searchIcon" class="s-search-icon-wrap">
          <div class="s-icon-search s-search-icon" :style="c_searchIconStyle"></div>
        </div>
        <input
          v-model="keyword"
          class="s-search-input"
          type="text"
          confirm-type="search"
          :placeholder="placeholder"
          :placeholder-style="c_placeholderStyle"
          :adjust-position="false"
          :style="c_inputSyle"
          @confirm="handleSearch"
        />
        <div v-if="clearIcon && showClear" class="s-search-clear-wrap" @click="handleClear">
          <div class="s-icon-cross s-search-clear" :style="c_clearIconStyle"></div>
        </div>
      </div>
      <div v-if="showAction" class="s-search-action" :style="c_actionStyle" @click="handleAction">
        <slot name="action">{{ actionText }}</slot>
      </div>
    </div>
  </div>
</template>

<script>
import addUnit from '../../utils/addUnit';
import mergeStyle from '../../utils/mergeStyle';

/**
 * s-search 搜索框
 * @description 搜索输入框组件
 * @property {Number|String} height 高度
 * @property {Number|String} padding padding
 * @property {Boolean} fixed 是否固定
 * @property {String} background 背景色
 * @property {String|Number} value v-model 双向绑定输入值
 * @property {String} placeholder placeholder文字
 * @property {String} placeholderColor placeholder文字颜色
 * @property {String|Object} placeholderStyle placeholder样式
 * @property {String} color 输入框文字颜色
 * @property {String|Object} inputStyle 输入框样式
 * @property {Boolean} searchIcon 是否显示搜索图标 icon
 * @property {Number|String} searchIconSize 搜索图标 icon大小
 * @property {String} searchIconColor 搜索图标 icon颜色
 * @property {Boolean} clearIcon 是否显示清空图标 icon
 * @property {Number|String} clearIconSize 清空图标 icon大小
 * @property {String} clearIconColor 清空图标 icon 颜色
 * @property {Boolean} showAction 是否显示右边 action
 * @property {String} actionText 右边action 文字
 * @property {String} actionColor 右边action 颜色
 * @property {String|Object} actionStyle 右边action 样式
 * @event {Function} change (value) 输入值改变时触发
 * @event {Function} clear 点击清空时触发
 * @event {Function} search (value) 回车或手机上点击键盘上搜索按钮时触发
 * @event {Function} action (value) 点击右边action时触发
 * @example <s-search v-model="searchQuery" show-action @search="handleSearch" @action="handleSearch" />
 */
export default {
  name: 'SSearch',
  props: {
    height: {
      type: [Number, String],
      default: 80,
    },
    padding: {
      type: [Number, String],
      default: '10rpx 30rpx',
    },
    fixed: {
      type: Boolean,
      default: false,
    },
    background: {
      type: String,
      default: '{bgBase}',
    },
    value: {
      type: [String, Number],
      default: '',
    },
    placeholder: {
      type: String,
      default: '请输入搜索关键字',
    },
    placeholderColor: {
      type: String,
      default: '{textPlaceholder}',
    },
    placeholderStyle: {
      type: [String, Object],
      default: '',
    },
    inputBackground: {
      type: String,
      default: '{white}',
    },
    color: {
      type: String,
      default: '{textPrimary}',
    },
    inputStyle: {
      type: [String, Object],
      default: '',
    },
    searchIcon: {
      type: Boolean,
      default: true,
    },
    searchIconSize: {
      type: [Number, String],
      default: 34,
    },
    searchIconColor: {
      type: String,
      default: '{textRegular}',
    },
    clearIcon: {
      type: Boolean,
      default: true,
    },
    clearIconSize: {
      type: [Number, String],
      default: 28,
    },
    clearIconColor: {
      type: String,
      default: '{textRegular}',
    },
    showAction: {
      type: Boolean,
      default: false,
    },
    actionText: {
      type: String,
      default: '搜索',
    },
    actionColor: {
      type: String,
      default: '{primary}',
    },
    actionStyle: {
      type: [String, Object],
      default: '',
    },
  },
  data() {
    return {
      keyword: '',
      showClear: false,
    };
  },
  computed: {
    c_height() {
      return addUnit(this.height);
    },
    c_style() {
      return mergeStyle({
        height: this.c_height,
        padding: addUnit(this.padding),
        background: this.$sTheme(this.background),
      });
    },
    c_placeholderStyle() {
      return mergeStyle(
        {
          color: this.$sTheme(this.placeholderColor),
        },
        this.placeholderStyle,
      );
    },
    c_inputSyle() {
      return mergeStyle(
        {
          color: this.$sTheme(this.color),
        },
        this.inputStyle,
      );
    },
    c_searchIconStyle() {
      return mergeStyle({
        fontSize: addUnit(this.searchIconSize),
        color: this.$sTheme(this.searchIconColor),
      });
    },
    c_clearIconStyle() {
      return mergeStyle({
        fontSize: addUnit(this.clearIconSize),
        color: this.$sTheme(this.clearIconColor),
      });
    },
    c_actionStyle() {
      return mergeStyle(
        {
          color: this.$sTheme(this.actionColor),
        },
        this.actionStyle,
      );
    },
  },
  watch: {
    keyword(keyword) {
      this.showClear = String(keyword) !== '';
      if (this.value !== keyword) {
        this.$emit('input', keyword);
        this.$emit('change', keyword);
      }
    },
    value: {
      immediate: true,
      handler(value) {
        this.keyword = value;
      },
    },
  },
  methods: {
    handleClear() {
      this.keyword = '';
      this.$emit('clear');
    },
    handleSearch() {
      this.$emit('search', this.value);
    },
    handleAction() {
      this.$emit('action', this.value);
    },
  },
};
</script>

<style lang="scss" scoped>
.s-search {
  &-wrap {
    display: flex;
    box-sizing: border-box;
  }
  &.is-fixed &-wrap {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 9;
  }
  &-container {
    flex: 1 0 0;
    height: 100%;
    display: flex;
  }
  &-icon-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 -10rpx 0 16rpx;
    box-sizing: border-box;
  }
  &-input {
    flex: 1 0 0;
    height: 100%;
    font-size: 26rpx;
    padding: 0 20rpx;
    display: flex;
    align-items: center;
    border-radius: 8rpx;
    box-sizing: border-box;
  }
  &-clear-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 16rpx 0 -10rpx;
    box-sizing: border-box;
  }
  &-action {
    height: 100%;
    font-size: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 20rpx;
  }
}
</style>
